<template>
    <div class="container">
        <m-header :closeFn="onClose">乘车人</m-header>
        <div class="main">
            <div class="list-wrap">
                <m-list :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :load-end="loadEnd">
                    <div class="item-wrap" v-for="(item,index) in list" :key="index" @click="onSelect(item)">
                        <div class="item-box">
                            <div class="name">{{item.passengers_name}}</div>
                            <div>
                                <div class="btn" @click.stop="toDetail(false,item)">详情</div>
                                <div class="btn2" v-show="!isComponent" @click.stop="handleDel(item.passengers_id)">删除</div>
                            </div>
                        </div>
                    </div>
                </m-list>
            </div>
        </div>
        <div class="footer">
            <van-button class="btn" color="#24C373" @click="toDetail(true)">添加乘车人</van-button>
        </div>
        <van-popup v-model="showPopup" position="right">
            <passenger-detail :value="curDetail" :add="isAdd" @close="onDtlClose" @added="getDataList(true)"></passenger-detail>
        </van-popup>
    </div>
</template>

<script>
  import list from '@/components/list/list';
  import passengerDetail from '@/pages/passengerDetail/passengerDetail'
  import {Popup } from 'vant';
  import {getPassenger, delPassenger} from "../../request/api";
  import dialog from '@/utils/dialog'

  export default {
    name: "passengerList",
    components: {
      "m-list": list,
      "passenger-detail": passengerDetail,
      [Popup.name]: Popup
    },
    props: ['isComponent'],
    data() {
      return {
        list: [],
        total: 0,
        limit: 10,
        page:1,
        loading: false,
        loadEnd: true,

        showPopup: false,
        curDetail: null,
        isAdd: null
      }
    },
    methods: {
      getDataList(first){
        let {page,limit,loadEnd} = this,  //当前请求页数
          list = [];
        getPassenger().then(res => {
          if (res.errcode !== 0) return;
          let data = res.row;

          this.list = data;
          this.loadEnd = !loadEnd;
          this.total = data.length;
          this.limit = data.length;
        })
        /*setTimeout(()=>{
          if (!first){list = this.list}
          let data = [
            {passenger_name: '小李',grade_class: '三年级二班',home_way: '家长接送',sex: '女',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老李',guardian_phone: '13612345678'},
            {passenger_name: '小何',grade_class: '三年级一班',home_way: '家长接送',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老何',guardian_phone: '13612345678'},
            {passenger_name: '小王',grade_class: '二年级三班',home_way: '自行回家',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老王',guardian_phone: '13612345678'},
            {passenger_name: '小秦',grade_class: '一年级二班',home_way: '自行回家',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老秦',guardian_phone: '13612345678'},
            {passenger_name: '小吴',grade_class: '一年级二班',home_way: '家长接送',sex: '男',card_type: '居民身份证',id_card: '440006655455677881',school: '第一小学',photo: 'https://img01.yzcdn.cn/vant/leaf.jpg',guardian_name: '老吴',guardian_phone: '13612345678'},
          ],total = 10;  //请求接口返回的数据列表和总数
limit
          list = [...list,...data];

          this.list = list;
          this.loadEnd = !loadEnd;
          this.page = ++page;
          this.total = total
        },1000)*/
      },
      onClose(){
        if (this.isComponent) {
          this.$emit('close');
        }else {
          this.$router.go(-1);
        }
      },
      onSelect(data){
        if (this.isComponent) {
          this.$emit('select',data);
        }

      },
      toDetail(isAdd,detail){
        this.curDetail = detail ? detail : {};
        this.isAdd = isAdd;
        this.showPopup = true;
      },
      onDtlClose(e){
        this.showPopup = false;
        this.curDetail = null;
        if (e) this.getDataList(true);
      },
      //删除
      handleDel(id){
        dialog.confirm('确认申请删除乘车人吗？').then(() =>{
          console.log('确定申请');
          this.$Loading();
          delPassenger(id).then(res => {
            if (res.errcode !== 0) return;
            this.$Toast('删除成功');
            this.getDataList(true);
          })
        },()=>{})

      }
    }
  }
</script>

<style scoped lang="less">
    .list-wrap{
        height: 100%;
        padding-top: 10px;
        box-sizing: border-box;
        .item-wrap{
            padding: 0 10px;
            & + .item-wrap{
                margin-top: 10px;
            }
            .item-box{
                background: #fff;
                border-radius: 2px;
                display: flex;
                justify-content: space-between;
                height: 50px;

                & > div{
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
                .name{
                    padding-left: 15px;
                    font-size: 16px;
                    color: #2E2E2E;
                }
                .btn,.btn2{
                    padding-right: 15px;
                    font-size: 14px;
                    color: #24C373;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
                .btn2{
                    color: #ff4d4a;
                }
            }
        }
    }

    .footer{
        padding: 10px;
        .btn{
            width: 100%;
        }
    }
</style>
